import React from 'react';
// 引入echart
import * as echarts from 'echarts';
import { useEffect } from 'react';
// 定义一个饼图组件,因为代码是在dom渲染前执行，所以使用useEffect进行包裹，否则报错
const Pie = (props) => {
    useEffect(() => {
        // console.log('22',props);
        var chartDom = document.getElementById(props.id);
        var myChart = echarts.init(chartDom);
        myChart.setOption({
            title: {
                text: props.title,
                subtext: '2022-12-17',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a}<br/>{b}:{c}({d}%)'
            },
            series: [
                {
                    name: props.name,
                    type: 'pie',
                    radius: '50%',
                    data:props.data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
    })


    return (
        <div id={props.id} style={{ width: props.w, height: props.h,}}>

        </div>
    );
}
// 设置默认值
Pie.defaultProps = {
    w: '33.3%',
    h: '300px'
}

export default Pie;
